<template>
  <!-- 头部 -->
  <MainHeader v-if="showHeader" />
  <!-- 面包屑 -->
  <BreadCrumbs v-if="breadCrumbsList.length" />
  <!-- 子应用容器 -->
  <MicroBody />
  <!-- 底部 -->
  <Footer v-if="showFooter" />
</template>

<script lang="ts" setup>
import MicroBody from './view/micro-body.vue'
import MainHeader from './components/Header/index.vue'
import Footer from './components/Footer/index.vue'
import BreadCrumbs from './components/BreadCrumbs/index.vue'

// 控制头部和底部显示
import { headerState, footerState, crumbsState } from './store'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import { routerLink } from './store/routerLink'
import { loginStatus } from './store/login'

const showHeader = ref(headerState.showHeader.value)
const showFooter = ref(footerState.showFooter.value)
const breadCrumbsList = ref(crumbsState.breadCrumbsList.value)

const router = useRouter()
const route = useRoute()
routerLink.value = router
watch(route, (val: any) => {
  // 注意如果登录状态没有是会一直跳到这个页面的
  if (!loginStatus.value && val.fullPath.indexOf('login') === -1) {
    router.push('/react/#/login')
  }
})
</script>

<style>
html,
body,
#micro_web_main_app {
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
